<template>
  <div>
    <el-table
      ref="tables"
      v-loading="tableLoading"
      :data="tableList"
      :height="tableOption.height"
      :row-style="rowStyle"
      :empty-text="emptyText"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="selectedOption.show"
        type="selection"
        :reserve-selection="selectedOption.reserveSelection"
        :fixed="selectedOption.fixed"
        :width="selectedOption.width"
      />
      <el-table-column
        v-if="tableOption.numberCol.show"
        :label="tableOption.numberCol.label"
        type="index"
        :fixed="tableOption.numberCol.fixed"
        :align="tableOption.numberCol.align"
        :width="tableOption.numberCol.width"
      />
      <el-table-column
        v-for="(item,index) in tableHeader"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :align="item.align||'left'"
        :fixed="item.fixed"
        :width="item.width"
      >
        <template slot-scope="scope">
          <slot v-if="item.slot" name="table-content" :data="{prop: item.prop, row: scope.row}"/>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="operateOption.show" :label="operateOption.title" :fixed="operateOption.fixed" :width="operateOption.width" :align="operateOption.align">
        <template slot-scope="scope">
          <slot name="table-operate" :data="scope"/>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pageOption.show" style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page.sync="queryOption.pageNum"
        :page-size.sync="queryOption.pageSize"
        :layout="pageOption.layout"
        :page-sizes="pageOption.pageSizes"
        background
        :total="queryOption.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
//表格默认配置项
const defaultTable = {
  height: 'calc(100vh - 320px)',
  numberCol: {
    show: true,
    width: '70px',
    align: 'center',
    fixed: 'left',
    label: '序号'
  }
}
//操作栏默认配置项
const defaultOperate = {
  show: true,
  title: '操作',
  width: '180px',
  fixed: 'right',
  align: 'center'
}
//选择栏默认配置项
const defaultSelect = {
  show: false,
  width: '50px',
  fixed: 'left',
  reserveSelection: true
}
//默认分页配置
const defaultPage = {
  show: true,
  pageSizes: [10, 20, 30, 50],
  layout: 'total, sizes, prev, pager, next, jumper'
}

export default {
  name: 'Table',
  props: {
    // 请求数据函数
    // eslint-disable-next-line vue/require-default-prop
    fetchApi: {
      type: Function
    },
    // 该参数为解析请求返回的表格数据的函数
    // eslint-disable-next-line vue/require-default-prop
    parseDataFunc: {
      type: Function
    },
    // 表头
    tableHeader: {
      type: Array,
      default: () => ([])
    },
    //表格配置
    table: {
      type: Object,
      default: () => ({})
    },
    //操作栏配置
    operate: {
      type: Object,
      default: () => ({})
    },
    //选择栏配置
    selected: {
      type: Object,
      default: () => ({})
    },
    //分页栏配置
    page: {
      type: Object,
      default: () => ({})
    },
    //查询参数
    query: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableLoading: false,
      emptyText: '数据加载中',
      //默认搜索条件
      defaultQuery: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      tableList: []
    }
  },
  computed: {
    operateOption() {
      const operate = this.operate
      return {
        ...defaultOperate,
        ...operate
      }
    },
    selectedOption() {
      const selected = this.selected
      return {
        ...defaultSelect,
        ...selected
      }
    },
    tableOption() {
      const table = this.table
      return {
        ...defaultTable,
        ...table
      }
    },
    pageOption() {
      const page = this.page
      return {
        ...defaultPage,
        ...page
      }
    },
    queryOption() {
      const query = this.query
      return {
        ...this.defaultQuery,
        ...query
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
     * 初始化
     **/
    init() {
      this.loadList()
    },
    /**
     * 通过接口获取数据
     **/
    async loadList() {
      this.tableLoading = true
      this.emptyText = '数据加载中'
      this.fetchApi && this.fetchApi(this.queryOption).then(res => {
        this.tableList = (this.parseDataFunc && this.parseDataFunc(res.data)) || res.data
      }).finally(() => {
        this.tableLoading = false
        this.emptyText = '数据加载完成'
      })
      if (!this.fetchApi) {
        this.tableLoading = false
        this.emptyText = '数据加载完成'
        this.tableList = [{}]
      }
    },
    /**
     * 行样式
     * @param rowIndex
     * @returns {{background: (string), height: string}}
     */
    rowStyle({ rowIndex }) {
      return {
        'height': '12px',
        'background': rowIndex % 2 !== 0 ? '#F5F8FD' : '#FFFFFF'
      }
    },
    /**
     * 选择行数据
     * @param value
     */
    handleSelectionChange(value) {
      const key = 'selectedRow'
      this.$emit('event', { key, value })
    },
    /**
     * 点击分页查询
     * @param page
     */
    handleCurrentChange(page) {
      if (page) {
        this.defaultQuery.pageNum = page
        //TODO 调用列表接口

      }
    },

    handleSizeChange(pageSize) {
      this.defaultQuery.pageNum = 1
      this.defaultQuery.pageSize = pageSize
      //TDOD 调用列表接口
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
